<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>设计</el-breadcrumb-item>
      <el-breadcrumb-item>设计清单列表</el-breadcrumb-item>
    </el-breadcrumb>


    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-select v-model="value" placeholder="请选择App>">
          <el-option
            v-for="item in options_name"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="value" placeholder="请选择App版本>">
          <el-option
            v-for="item in options_version"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="value" placeholder="合并到>">
          <el-option
            v-for="item in options_version"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <!--        <span>设计清单列表</span>-->
        <el-button style="float: right; padding: 3px 0" type="text" @click="addDesign">添加</el-button>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="name"
          label="APP">
        </el-table-column>

        <el-table-column
          prop="version"
          label="版本">
        </el-table-column>
        <el-table-column
          prop="describe"
          label="描述">
        </el-table-column>

        <el-table-column
          prop="time"
          label="时间">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-card>


  </div>
</template>

<script>
  export default {
    name: "DesignPage",
    data() {
      return {
        options_name: [{
          value: '选项1',
          label: 'app1'
        }, {
          value: '选项2',
          label: 'app2'
        }, {
          value: '选项3',
          label: 'app3'
        }, {
          value: '选项4',
          label: 'app4'
        }, {
          value: '选项5',
          label: 'app5'
        }],
        options_version: [{
          value: '选项1',
          label: '1'
        }, {
          value: '选项2',
          label: '2'
        }, {
          value: '选项3',
          label: '3'
        }, {
          value: '选项4',
          label: '4'
        }, {
          value: '选项5',
          label: '5'
        }],
        value: '',
        tableData: [{
          name: 'app1',
          time: '2020-7-7',
          describe: '描述',
          version: '1',
        }, {
          name: 'app1',
          time: '2020-7-7',
          describe: '描述',
          version: '2',
        }, {
          name: 'app1',
          time: '2020-7-7',
          describe: '描述',
          version: '3',
        }, {
          name: 'app1',
          time: '2020-7-7',
          describe: '描述',
          version: '4',
        }]
      }
    },
    methods: {
      addDesign() {
        this.$router.push("/addDesign")
      },
      handleEdit(index, row) {
        this.$router.push({
            name:'AddAccount',
            path:'/addAccount',
            params:{
              object:row
            }
          }

        )
        console.log(index, row);
      },
      handleDelete(index, row) {
        // console.log(index, row.name);
      }
    }
  }
</script>

<style scoped>
  .box-card {
    margin-top: 20px;
  }

  .el-button {
    margin-top: 10px;
  }
</style>

